CSS Animation
CSS animations allow you to animate CSS property values over time. They provide a simple and robust approach to graphics without having to rely on JavaScript.
Basics of CSS animation
@keyframes rule
This defines the stages of the animation, which determine how the element will be changed at different times.
Animation properties
These properties are used to apply animation to an element and control its actions, such as animation name, animation duration, animation time function, animation delay, and so on
CSS code for Animation
/* Define the animation using @keyframes */
@keyframes moveAndChangeColor {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: yellow;
transform: translateX(50%);
}
100% {
background-color: green;
transform: translateX(100%);
}
}
/* Apply the animation to the element */
.animated-box {
width: 100px;
height: 100px;
background-color: red;
animation-name: moveAndChangeColor;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}In the above code-
@ keyframes moveToChangeColor
This defines the moveAndChangeColor animation.
At 0% (initially) the box turns red and is in the first position.
At 50% (half) the box turned red and moved to 50% of the object width.
100% (finally) the box is green and has gone to 100% of its product width.
.animated-box
This class is applied to the <div> element.
animation-name: moveAndChangeColor; Applies the moveAndChangeColor
animation to the element.
animation-duration: 4s; The animation shows that one cycle should be completed in 4 seconds.
animation-time-function:ease-in-out; The animation starts out slow, speeds up in the middle, and slows down again at the end.
animation - iteration - count : infinite; The animation repeats forever.
Example-
Here is a basic example that demonstrates the CSS animation,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
/* Define the animation using @keyframes */
@keyframes moveAndChangeColor {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: yellow;
transform: translateX(50%);
}
100% {
background-color: green;
transform: translateX(100%);
}
}
/* Apply the animation to the element */
.animated-box {
width: 100px;
height: 100px;
background-color: red;
animation-name: moveAndChangeColor;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<h3>CSS Animation Example</h3>
<div class="animated-box"></div>
</body>
</html>Output-
If you open this HTML file in a browser, you will see a box that smoothly changes its background color from red to yellow to green as you scroll down the screen, and then vice versa
Also, Read: How to fetch data from API using HTML Fetch API
Leave Comment